<!-- 未登录 -->
<template>
	<view class="nuser-box">
		<!-- #ifndef H5 -->
		<Nav></Nav>
		<!-- #endif -->
		<!-- 中间内容 -->
		<view class="user">
			<!-- 头像 -->
			<view class="user-image">
				<u-avatar :src="src" size="60" class="avter"></u-avatar>
			</view>
			<!-- 手机号id显示 -->
			<view class="user-mbilb" @click="login">
				请点击登录
			</view>
		</view>
		 <!-- 余额样式 -->
		<view class="select-box">
				<view class="select">
					<text class="text">0</text>
					<view>余额</view>
			</view>
			<view class="select">
					<text class="text">0</text>
					<view>积分</view>
			</view>
			<view class="select">
					<text class="text">0</text>
					<view>优惠劵</view>
			</view>
			<view class="select">
					<text class="text">0</text>
					<view>收藏</view>
			</view>
		</view>
		<!-- 订单中心 -->
		<view class="shoop-box">
			<!-- 上 -->
			<view class="orders">
				<view class="orders-a">
					订单中心
				</view>
				<view class="orders-b">
					查看全部 >
				</view>
			</view>
			<!-- 下 -->
			<view class="orders-bottom">
				<!-- 小模块 -->
				<view class="orders-bottom-a">
					<view class="orders-bottom-img">
					<image src="../../static/image/order1.png" mode=""></image>
					</view>
					<view class="orders-bottom-text">
						待付款
					</view>
				</view>
				<view class="orders-bottom-a">
					<view class="orders-bottom-img">
					<image src="../../static/image/order2.png" mode=""></image>
					</view>
					<view class="orders-bottom-text">
						待发货
					</view>
				</view>
				<view class="orders-bottom-a">
					<view class="orders-bottom-img">
					<image src="../../static/image/order3.png" mode=""></image>
					</view>
					<view class="orders-bottom-text">
						待收货
					</view>
				</view>
				<view class="orders-bottom-a">
					<view class="orders-bottom-img">
					<image src="../../static/image/order4.png" mode=""></image>
					</view>
					<view class="orders-bottom-text">
						待评价
					</view>
				</view>
				<view class="orders-bottom-a">
						<view class="orders-bottom-img">
						<image src="../../static/image/order5.png" mode=""></image>
						</view>
						<view class="orders-bottom-text">
							售后/退款
						</view>
					</view>
				</view>
			</view>
			<!-- 我的服务 -->
			<view class="serve-box">
				<view class="serve-box-a">
					我的服务
				</view>
				<view class="serve-box-b">
					<view class="serve-box-c">
						<view class="serve-box-img">
							<image src="../../static/image/customer.png" mode=""></image>
						</view>
						<view class="serve-box-text">
							联系客服
						</view>
					</view>
				</view>
			</view>
			<view class="support">
				<image src="../../static/image/support.png" mode=""></image>
			</view>
		</view>
	</view>

</template>

<script>
	import Nav from "@/components/top_nav.vue";
	export default {
		data() {
			return {
				src: '../../static/image/f.png'
			}
		},
		components: {
			Nav
		},
		methods:{
			login(){
				uni.navigateTo({
					url:"/pages/login/login"
				})
			}
		}
	}
</script>

<style lang="scss" >
	// 头部样式
	.user {
		display: flex;
		align-items: center;
		.user-image {
			margin: 0 10px;
			.avter {
				padding-top: 20px;
			}
		}
		.user-mbilb {
			color: #fff;
		}
	}
	// 余额相关样式
	.select-box{
		display: flex;
		text-align: center;
		justify-content: space-around;
		margin-top: 40px;
		.select{
			color: #fff;
		     .text{
				 font-size: 25px;
			 }
			 view{
				opacity: 0.5;
				   font-size: 13px;
			 }
		}
	}
	// 订单中心样式
	.shoop-box{
		width: 90%;
		margin: 15px 14px;
		background-color: #fff;
		border-radius: 10px;
		margin-bottom: 10px;
		// 订单中心
		.orders{
			display: flex;
			padding: 10px 10px;
		.orders-a{
			font-size: 16px;
			font-weight: 600;
			margin-right: auto;
		}
		.orders-b{
			font-size: 14px;
			opacity: 0.8;
		}
		}
	}
	.orders-bottom{
		display: flex;
		padding: 10px 10px;
		justify-content: space-around;
		.orders-bottom-a{
			text-align: center;
			.orders-bottom-img image{
				width: 30px;
				height: 30px;
			}
			.orders-bottom-text{
				margin-top: 10rpx;
				font-size: 12px;
			}
		}
	}
	// 我的服务样式
	.serve-box{
		width: 90%;
		margin: 15px 14px;
		background-color: #fff;
		border-radius: 10px;
		margin-bottom: 10px;
		.serve-box-a{
			padding: 10px 10px;
			font-size: 16px;
			font-weight: 600;
		}
		.serve-box-b{
			display: flex;
			padding: 15px 15px;
			.serve-box-c{
				text-align: center;
				.serve-box-img image{
					width: 30px;
					height: 30px;
				}
				.serve-box-text{
					font-size: 12px	;
				}
			}
			
		}
	}
	// dialog
	.support {
		width: 100%;
		height: 120px;
		margin: auto;
		text-align: center;
		background-color: #f3f3f3;
		image {
			// margin-top: 20px;
			width: 100px;
			height: 50px;
		}
	}
</style>
